<template>
  <div class="bigBox">
    <!-- 导航栏 -->
    <nav class="ui inverted attached segment barTop">
      <div class="ui container">
        <sui-menu class="ui inverted secondary">
          <!-- 左边菜单 -->
          <h2 class="ui teal header item" @click="toHome">DMS</h2>
          <a
            is="sui-menu-item"
            v-for="item in items"
            :active="isActive(item)"
            :key="item"
            :content="item"
            @click="select(item)"
          />
          <!-- 右边菜单 -->
          <div class="right item">
            <div class="ui inverted">
              <p>{{role}}</p>
            </div>
            <!-- <div class="ui icon inverted transparent input">
              <input type="text" placeholder="Search document" />
              <i class="search link icon"></i>
            </div> -->
            <div class="ui inverted" style="margin-left:2rem;!important">
              <el-dropdown @command="userFun">
                <span class="el-dropdown-link">
                  <i><img class="ui circular image userInfo" :src="img_url + userImg" /></i>
                  <p>{{userInfo.nickname}}</p>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">
                    个人中心
                  </el-dropdown-item>
                  <el-dropdown-item command="0">
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </sui-menu>
      </div>
    </nav>
    <!-- 内容 -->
    <div style="min-height: 45rem;">
      <router-view />
    </div>

    <!-- 回到顶部 -->
    <el-backtop :bottom="60">
      <div class="backTop">TOP</div>
    </el-backtop>

    <!-- footer -->
    <footer class="ui inverted vertical segment barBottom">
      <div class="ui center aligned container">
        <div class="ui inverted divided grid">
          <div class="three wide column">联系我们</div>
          <div class="three wide column">联系我们</div>
          <div class="three wide column">联系我们</div>
          <div class="seven wide column">联系我们</div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>

export default {
  data() {
    return{
      img_url:'http://1.14.48.193:8888/img/',
      userImg: sessionStorage.getItem('headImg'),
      userInfo:JSON.parse(sessionStorage.getItem('userInfo')),
      role:'',                  //用户身份
      active: '主页',
      items: ['主页', '个人中心', '文件中心'],
    }
  },
  methods: {
    toHome(){
      this.$router.push('/Home/index');
      this.active = '主页';
    },
    getRole(){
      if(this.userInfo.role == 'admin')
        this.role = '管理员';
      else
        this.role = '普通用户';
    },
    isActive(name) {
      return this.active === name;
    },
    select(name) {
      this.active = name;
      if(this.active == '主页')
        this.$router.push('/Home/index');
      else if(this.active == '文件中心')
        this.$router.push('/documentAudit');
      else if(this.active == '个人中心')
        this.$router.push('/myHome');
    },
    userFun(command){
      if(command == '1')
      {
        console.log();
        this.$router.push('/myHome');
        this.active = '个人中心';
      }
      else if(command == '0')
      {
        sessionStorage.removeItem('token');
        sessionStorage.removeItem('userInfo');
        sessionStorage.removeItem('show');
        this.$router.push('/');
      }

    }
  },
  created () {
    this.getRole();
    var currntPath = this.$router.currentRoute.path;
    if(currntPath == '/Home/index')
      this.active = '主页'
    else if(currntPath == '/myHome' || currntPath == '/myHome/myInformation' || currntPath == '/myHome/changePswd')
      this.active = '个人中心'
    else if(currntPath == '/documentAudit' || currntPath == '/documentAudit/documentUpLoad' || currntPath == '/documentAudit/documentDelete' || currntPath == '/documentAudit/adminDocument')
      this.active = '文件中心'
  }
}
</script>
<style scoped>
.bigBox{
  width: 100vw;
}
.barTop {
  padding-top: 0.2em !important;
  padding-bottom: 0.2em !important;
}
.barBottom {
  padding-top: 2em !important;
  padding-bottom: 2em !important;
}
.userInfo{
  height: 40px;
  width: 40px;
}
.backTop{
   height: 100%;
    width: 100%;
    background-color: #f2f5f6;
    box-shadow: 0 0 6px rgba(0, 0, 0, .12);
    text-align: center;
    line-height: 40px;
    color: #1989fa;
    font-size: 1rem;
    border-radius: 50%;
}

/* //简单适配移动端 */
@media screen and (max-width: 450px){
  .bigBox {
      width: 1000px;
    }
}
</style>